<template>
    <div class="login flex flex-col">
        <div class="flex-1 flex items-center justify-end md:w-[1200px] mx-auto">
            <div class="login-card flex rounded-md">
               <!-- <div class="flex-1 h-full hidden md:inline-block">
                    <image-contain :src="config.login_image" :width="400" height="100%" />
                </div> -->
                <div
                    class="login-form bg-body flex flex-col justify-center px-5 py-10 md:w-[400px] w-[375px] flex-none mx-auto"
					v-if="isLogin == 1"
                >
                    <div class="text-center text-2xl font-medium mb-8 font-bold color0054A6">
					Welcome to Echo Machinery ERP System
					</div>
                    <el-form ref="formRef" :model="formData" size="large" :rules="rules">
                        <el-form-item prop="account">
                            <el-input
                                v-model="formData.account"
                                placeholder="请输入账号"
								border="none"
                                @keyup.enter="handleEnter"
                            >
                                <template #prepend>
                                    <icon name="el-icon-User" />
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input
                                ref="passwordRef"
                                v-model="formData.password"
                                show-password
                                placeholder="请输入密码"
                                @keyup.enter="handleLogin"
                            >
                                <template #prepend>
                                    <icon name="el-icon-Lock" />
                                </template>
                            </el-input>
                        </el-form-item>
						<el-form-item class="flex items-center justify-" prop="code">
							<el-col :span="16">
								<el-input
									v-model="formData.code"
									placeholder="请输入验证码"
									@keyup.enter="handleEnter"
								>
								</el-input>
							</el-col>
							<el-col :span="8">
								<div @click="getImg()">
									<img  :src="imgMes.imgSrc" alt="">
								</div>
							</el-col>
						</el-form-item>
                    </el-form>
                    <div class="mb-5 text-right">
						<el-link :underline="false" style="color: #0054A6;" @click="isLogin = !isLogin">忘记密码</el-link>
                        <!-- <el-checkbox v-model="remAccount" label="记住账号"></el-checkbox> -->
                    </div>
                    <el-button style="height: 48px;line-height: 48px;background-color: #0054A6;border: none;" type="primary" size="large" :loading="isLock" @click="lockLogin">
                        登录
                    </el-button>
                </div>
				<!-- //忘记密码 -->
				<div
				    class="login-form bg-body flex flex-col justify-center px-5 py-10 md:w-[400px] w-[375px] flex-none mx-auto"
					v-else
				>
				    <div class="text-center text-2xl font-medium mb-8 font-bold color0054A6">
					忘记密码
					</div>
				    <el-form ref="formRef" :model="editData" size="large" :rules="rules">
				        <el-form-item prop="account">
				            <el-input
				                v-model="editData.account"
				                placeholder="请输入您的账号"
								border="none"
				                @keyup.enter="handleEnter(1)"
				            >
				                <template #prepend>
				                    <icon name="el-icon-User" />
				                </template>
				            </el-input>
				        </el-form-item>
						<el-form-item class="flex items-center justify-between" prop="code">
							<el-col :span="16">
								<el-input
									v-model="editData.code"
									placeholder="请输入验证码"
									@keyup.enter="handleEnter(1)"
								>
								</el-input>
							</el-col>
							<el-col :span="7">
								<el-button class="ml-[10px]" type="primary" plain>
									获取验证码
								</el-button>
							</el-col>
						</el-form-item>
				        <el-form-item prop="password">
				            <el-input
				                ref="passwordRef"
				                v-model="editData.password"
				                show-password
				                placeholder="请输入新密码"
				                @keyup.enter="handleLogin"
				            >
				                <template #prepend>
				                    <icon name="el-icon-Lock" />
				                </template>
				            </el-input>
				        </el-form-item>
						
				    </el-form>
				    <div class="mb-5 text-right">
						<el-link :underline="false" style="color: #0054A6;" @click="isLogin = !isLogin">去登录</el-link>
				    </div>
				    <el-button style="height: 48px;line-height: 48px;background-color: #0054A6;border: none;" type="primary" size="large" 
					:loading="isLock" @click="handleEdit">
				        提交修改
				    </el-button>
				</div>
            </div>
        </div>
        <layout-footer />
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref, shallowRef } from 'vue'
import type { InputInstance, FormInstance } from 'element-plus'
import { getScaptcha } from '@/api/app'
import LayoutFooter from '@/layout/components/footer.vue'
import useAppStore from '@/stores/modules/app'
import useUserStore from '@/stores/modules/user'
import cache from '@/utils/cache'
import { ACCOUNT_KEY } from '@/enums/cacheEnums'
import { PageEnum } from '@/enums/pageEnum'
import { useLockFn } from '@/hooks/useLockFn'
const passwordRef = shallowRef<InputInstance>()
const formRef = shallowRef<FormInstance>()
const appStore = useAppStore()
const userStore = useUserStore()
const route = useRoute()
const router = useRouter()
const remAccount = ref(false)
const config = computed(() => appStore.config)
let isLogin = ref(true)
const formData = reactive({
    account: '',
    password: '',
	code:'',
	code_token:'',
})
const editData = reactive({
    account: '',
    password: '',
	code:'',
})
const imgMes = reactive({
	imgSrc:''
})
const rules = {
    account: [
        {
            required: true,
            message: '请输入账号',
            trigger: ['blur']
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: ['blur']
        }
    ],
	code:[
		{
		    required: true,
		    message: '请输入验证码',
		    trigger: ['blur']
		}
	]
}
//获取验证码图片
const getImg = async () => {
	const data = await getScaptcha()
	console.log(data,'data')
	imgMes.imgSrc = data.svg
	formData.code_token = data.token    
}
// 回车按键监听
const handleEnter = (num) => {
	if(num == 1){
		if (!editData.password) {
		    return passwordRef.value?.focus()
		}
	}else{
		if (!formData.password) {
		    return passwordRef.value?.focus()
		}
		handleLogin()
	}
    
    
}
// 登录处理
const handleLogin = async () => {
    await formRef.value?.validate()
    // 记住账号，缓存
    cache.set(ACCOUNT_KEY, {
        remember: remAccount.value,
        account: remAccount.value ? formData.account : ''
    })
    await userStore.login(formData)
    const {
        query: { redirect }
    } = route
    const path = typeof redirect === 'string' ? redirect : PageEnum.INDEX
    router.push(path)
}
const { isLock, lockFn: lockLogin } = useLockFn(handleLogin)

//提交修改密码
const handleEdit = async () => {
	
}

onMounted(() => {
	
    const value = cache.get(ACCOUNT_KEY)
    if (value?.remember) {
        remAccount.value = value.remember
        formData.account = value.account
    }
})
getImg()
</script>

<style lang="scss" scoped>
.login {
    background-image: url('./images/login_bg.png');
    @apply min-h-screen bg-no-repeat bg-center bg-cover;
    .login-card {
        height: 400px;
    }
	.color0054A6{
		color: #0054A6;
	}
}
</style>
